<template>
  <div style="height: 100%;">
    
    
    <div class="box1">
      <div style="display: inline-flex;margin-top: 5px;text-align: left;">
        <img style="height: 48px;margin-top: 0.2vh;" src="../../assets/images/compare.png">
        <div style="margin-left: 5px;margin-top:14px;font-family:emoji;color: #f2f2f2;font-size: 0.9vw;">对比基准1：:文献《Techno-economic analysis of hydrogen pipeline network in China based on levelized cost of transportation》平准化输氢成本</div>
      </div>
       
    </div>
    
    <div class="box2">

      <el-table ref="table" height="225" :data="tableData1" tooltip-effect="dark" style="width: 100%">
  
        <el-table-column
          prop="data1"
          label="日输氢量(kg)"
          align="center">
        </el-table-column>

        <el-table-column
          prop="data2"
          label="氢源压力(MPa)"
          align="center">
        </el-table-column>

        <el-table-column
          prop="data3"
          label="输氢压力(MPa)"
          align="center">
        </el-table-column>

        <el-table-column
          prop="data4"
          label="管道长度(km)"
          align="center">
        </el-table-column>

        
        <el-table-column
          prop="data5"
          label="管道内径(mm)"
          align="center">
        </el-table-column>

                
        <el-table-column
          prop="data6"
          label="对比基准平准化成本(￥/kg)"
          align="center">
        </el-table-column>

        <el-table-column
          prop="data7"
          label="模型计算平准化成本(￥/kg)"
          align="center">
        </el-table-column>

        <el-table-column
          prop="data8"
          label="计算误差(%)"
          align="center">
        </el-table-column>
     
      </el-table>

    </div>


    
    
    <div class="box3">
      <div style="display: inline-flex;margin-top: 5px;text-align: left;">
        <img style="height: 48px;margin-top: 0.2vh;" src="../../assets/images/compare.png">
        <div style="margin-left: 5px;margin-top:14px;font-family:emoji;color: #f2f2f2;font-size: 0.9vw;">对比基准2：:潍坊高新华润燃气有限公司5.2km纯氢管道项目实际的平准化输氢成本</div>
      </div>
      
   
    </div>
    
    <div class="box4">

      <el-table ref="table" height="225" :data="tableData2" tooltip-effect="dark" style="width: 100%">
  
        <el-table-column
          prop="data1"
          label="日输氢量(kg)"
          align="center">
        </el-table-column>

        <el-table-column
          prop="data2"
          label="氢源压力(MPa)"
          align="center">
        </el-table-column>

        <el-table-column
          prop="data3"
          label="输氢压力(MPa)"
          align="center">
        </el-table-column>

        <el-table-column
          prop="data4"
          label="管道长度(km)"
          align="center">
        </el-table-column>
        
        <el-table-column
          prop="data5"
          label="管道内径(mm)"
          align="center">
        </el-table-column>
                
        <el-table-column
          prop="data6"
          label="对比基准平准化成本(￥/kg)"
          align="center">
        </el-table-column>

        <el-table-column
          prop="data7"
          label="模型计算平准化成本(￥/kg)"
          align="center">
        </el-table-column>

        <el-table-column
          prop="data8"
          label="计算误差(%)"
          align="center">
        </el-table-column>

      </el-table>

    </div>


  </div>
</template>

<script>
 

  export default {
    name: 'phtErrorModel',
    components: {
      
     },

    data() {
      return {
        tableData1:[
           
        ],
        tableData2:[
           
        ],
        projectId : "",
      }
    },
    mounted: function() {
      //获取项目id
      this.projectId = this.$route.query.projectId;
      this.verificat();
    },
    methods: {  
  
      verificat : function(){
        
        var type = "pipelineHydrogenTransport";

        var vm = this;  

        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/verificat?type='+type+"&projectId="+this.projectId).then((res) => { 
          var result = res.data;
          
          if(result){
            vm.tableData1 = result.tableData1;
            vm.tableData2 = result.tableData2;
          }
        }).catch((error) => {
          console.log(error);
        });

      },

    }
  }
</script>

<style scoped>


/deep/ .el-table th.el-table__cell.is-leaf {
     border-bottom: none;
 }
 /deep/ .el-table::before{
     background-color:transparent;
 }



    .titleDiv {
      width: 100%;
      margin: 0.5vh;
      height: 2.5vh; 
      font-weight: bold; 
      -webkit-box-shadow: none;
      box-shadow: none;
      font-weight: 700;
      font-style: normal;
      font-size: 2vh;
      color: #f2f2f2;
      text-align: left;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      position: relative;
    }
    .barColorBox {
      height: 2.5vh;
      width: 0.7vh;
      border-radius: 1px;
      display: inline-block;
      vertical-align: text-bottom;
      border: none;
      box-shadow: 0 -1px 10px rgba(0,0,0,0.1);
      background-color: #FAFAFA;
      background-image: -webkit-linear-gradient(top,#17b4db,#07c968);
      background-image: -o-linear-gradient(top,#17b4db,#07c968);
      background-image: -ms-linear-gradient(top,#17b4db,#07c968);
      background-image: linear-gradient(top,#17b4db,#07c968);
      background-repeat: repeat-x;
    }

    .titlefont {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      font-size: 1.8vh;
      padding-left: 5px;
      margin-top: 0vh;
    } 
    
  .box1{ 
    width: 98%;
    height: 6vh;
    margin: auto;
    border-radius: 5px;
    text-align: left;
    margin: auto;
    margin-top: 1vh;
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

 

  .box2{ 
    width: 96%;
    height: 26vh;
    margin-top: 1vh;
    margin: 0 auto;
    padding: 15px;
    top: 17.5vh;
    left: 3.5vh;
    position: absolute;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  
  .box3{ 
    width: 98%;
    height: 6vh;
    margin: auto;
    border-radius: 5px;
    text-align: left;
    margin: auto;
    margin-top: 29vh;
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

 

  .box4{ 
    width: 96%;
    height: 26vh;
    margin-top: 1vh;
    margin: 0 auto;
    padding: 15px;
    top: 52.5vh;
    left: 3.5vh;
    position: absolute;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }


</style>
